<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>精灵球属性</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container" id="app">
    <div class="layuimini-main">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>精灵球属性</legend>
        </fieldset>

        <div class="layui-form"  lay-filter="detail-form">

            <div class="layui-form-item">
                <label class="layui-form-label">等级</label>
                <div class="layui-input-block">
                    <input type="number" min="1" max="60" step="1" name="Level" v-model="formData.Level" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">五行</label>
                <div class="layui-input-block">
                    <input type="radio" name="WuXing" value="0" class="layui-input" title="随机" checked="checked">
                    <input type="radio" name="WuXing" value="1" class="layui-input" title="金">
                    <input type="radio" name="WuXing" value="2" class="layui-input" title="木">
                    <input type="radio" name="WuXing" value="3" class="layui-input" title="水">
                    <input type="radio" name="WuXing" value="4" class="layui-input" title="火">
                    <input type="radio" name="WuXing" value="5" class="layui-input" title="土">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">经验</label>
                <div class="layui-input-block">
                    <input type="number" name="Exp" v-model="formData.Exp" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">忠诚度</label>
                <div class="layui-input-block">
                    <input type="number" name="Fidelity" v-model="formData.Fidelity" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">宠物背包</label>
                <div class="layui-input-block">
                    <input type="number" name="BagNum" v-model="formData.BagNum" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">宠物名称</label>
                <div class="layui-input-block">
                    <input type="text" name="Name" v-model="formData.Name" autocomplete="off" placeholder="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">宠物技能</label> <!--最大5个-->
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-sm" v-on:click="petSkillAdd()">添加</button>
                    <div class="select-list layui-clear">
                        <div v-for="(item,index) in petSkillSelectList" class="left">
                            <div class="layui-inline" style="width:120px;">
                                <select class="layui-select" lay-search="" :data-index="index" name="petSkillId[]">
                                    <option value="">选择技能</option>
                                    <option :value="row.id" v-for="row in item.petSkillList">{{row.name}}</option>
                                </select>
                            </div>
                            <i class="layui-icon del" style="color: red;" v-on:click="petSkillSelectList.splice(index,1)"></i>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">宠物属性</label> <!--最大5个-->
                <div class="layui-input-block">
                    <button type="button" class="layui-btn layui-btn-xs layui-btn-sm" v-on:click="soulAttrAdd()">添加</button>
                    <div class="select-list layui-clear">
                        <div v-for="(item,index) in petAttrSelectList" class="left">
                            <div class="layui-inline" style="width:120px;">
                                <select class="layui-select" lay-search="" :data-index="index" name="petAttrId[]">
                                    <option value="">选择属性</option>
                                    <option :value="row.id" v-for="row in item.petAttrList">{{row.name}}</option>
                                </select>
                            </div>
                            <div class="layui-inline" style="width:70px;margin-right: 10px;">
                                <input type="number" class="layui-input" name="petAttrValue[]" />
                            </div>
                            <i class="layui-icon del" style="color: red;" v-on:click="petAttrSelectList.splice(index,1)"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="submit">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/js/common.js?v=5" charset="utf-8"></script>
<script>
    var _this = null,form=null
    new Vue({
        el:"#app",
        data:{
           petSkillList:getEnum("petSkill"), //宠物技能 候选项
           petAttrList:getEnum('petAttr'), //宠物属性 候选项
           petSkillSelectList:[],
           petAttrSelectList:[],
           formData:{
               Level:1, // 1-60
               WuXing:0, // 0 1 2 3 4 5
               Exp:1, // 1-60
               Fidelity:100,
               BagNum:12,
               Name:'',
               AddiAttr:[], //宠物技能IDS
               Skill:[],  //宠物属性 {CfgId:,Value}
           }
        },
        created(){
            _this = this
        },
        updated:function(){
            form.render()
        },
        methods:{
            petSkillAdd(){
                this.petSkillSelectList.push({
                    petSkillList:this.petSkillList
                })
            },
            soulAttrAdd(){
                this.petAttrSelectList.push({
                    petAttrList:this.petAttrList
                })
            }
        },
        mounted:function(){
            var _this = this;

            layui.use(['form','jquery'], function () {
                form = layui.form;
                layer = layui.layer;
                $ = layui.jquery;

                form.render();

                form.on("submit(submit)",function (data) {
                    var formData = data.field

                    var petSkillIds = []
                    var petAttrIds = []
                    var petAttrValues = []

                    for(k in formData){
                        var v = formData[k]
                        if (k.indexOf("petSkillId")!==-1){
                            petSkillIds.push(v)
                            delete formData[k]
                        }
                        if (k.indexOf("petAttrId")!==-1){
                            petAttrIds.push(v)
                            delete formData[k]
                        }
                        if (k.indexOf("petAttrValue")!==-1){
                            petAttrValues.push(v)
                            delete formData[k]
                        }
                    }

                    formData.petSkillIds = petSkillIds
                    formData.petAttrIds = petAttrIds
                    formData.petAttrValues = petAttrValues

                    parent.petAttrSetCallback(formData)

                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                    return false;
                })

            });

        }
    })
</script>
</body>
</html>